<template>
	<div class="list" ref="wrapper">
		<div>
			<div class="area">
				<div class="title border-topbottom">当前城市</div>
				<div class="button-list">
				  <div class="button-wrapper">
					<div class="button">{{ currentCity }}</div>
				  </div>
				</div>
			</div>
			<div class="area">
				<div class="title border-topbottom">热门城市</div>
				<div class="button-list">
					<div class="button-wrapper" v-for="(item, index) in hotCities" 
					:key="item.id" @click="handleCityClick(item.name)">
						<div class="button">{{ item.name }}</div>
					</div>
				</div>
			</div>
			<div class="area" v-for="(item, key) in cities" :key="key" :id="key">
				<div class="title border-topbottom">{{ key }}</div>
				<div class="item-list">
					<div class="item border-bottom" v-for="childItem in item" :key="childItem.id">{{ childItem.name }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import Bscroll from 'better-scroll'
	import {mapState, mapMutations} from 'vuex'
	export default {
		name: 'CityList',
		data() {
			return {
				
			};
		},
		mounted() {
			this.scroll = new Bscroll(this.$refs.wrapper)
			// this.scroll = new Bscroll('.list') // 这样也行，绑定指定元素
		},
		computed: {
			...mapState({
				currentCity: 'city'
			})
		},
		methods: {
			handleCityClick(city) {
				// this.$store.commit('changeCity', city);
				this.changeCity(city);
				this.$router.push('/'); // 跳转回首页
			},
			...mapMutations(['changeCity'])
		},
		props: ['cities', 'hotCities', 'letter'],
		watch: {
			letter() { // 监听letter,变化时触发
				console.log(this.letter)
				this.scroll.scrollToElement('#'+ this.letter); // 滚动到指定区域
			}
		}
	}
</script>

<style lang="less" scoped>
	.list{
		overflow: hidden;
		position: absolute;
		top: 1.58rem;
		left: 0;
		right: 0;
		bottom: 0;
		.title{
			line-height: .54rem;
			background: #eee;
			padding-left: .2rem;
			color: #666;
			font-size: .26rem;
		}
		
		.button-list{
			overflow: hidden;
			padding: .1rem .6rem .1rem .1rem;
		}
		.button-wrapper{
			float: left;
			width: 33.33%;
		}
		.button{
			margin: .1rem;
			padding: .1rem 0;
			text-align: center;
			border: .02rem solid #ccc;
			border-radius: .06rem;
		}
		.item{
			line-height: .76rem;
			padding-left: .2rem;
		}
		.border-bottom{
			border-bottom:1px solid #ddd;
		}
	}
</style>
